<template>
<div class='toast' v-show="isShow">
  {{message}}
</div>
</template>

<script>
export default {
  data () {
    return {
      message:'',
      isShow:false
    };
  },
  components: {},
  methods: {
    show(message, duration=2000){
      this.message = message
      this.isShow = true

      setTimeout(()=>{
        this.isShow = false
        this.message = ''
      }, duration)
    }
  }
}

</script>

<style lang='scss' scoped>
.toast{
  padding:.1rem .3rem;
  border-radius:.4rem;
  color:#fff;
  background:rgba(0,0,0,.8);
  text-align: center;
  position:fixed; left: 50%; top:50%; 
  transform:translate(-50%,-50%);
  z-index: 800;
}
</style>